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$ Le Hollandais Volant 


Fialox 


Télécharger Firefox 


Attention : ce tutoriel est vieux et certaines explications ne fonctionnent plus avec les versions actuelles de Firefox. 


On ne présente plus le petit panda roux, le Firefox : le navigateur libre de Mozilla. 


Firefox T | n l ES | 


® Page de démarrage de Mozilla Firefox 


i «= > | Gi sbouthome Y Dal H- Google 


Google Rechercher | 


Merci d'avoir choisi Firefox ! Pour profiter 
pleinement de votre navigateur, découvrez ses 
dernières fonctionnalités. 


À propos de Mozilla 


Ce navigateur, en plus d'être multiplateforme et libre, présente l'énorme avantage d'être personnalisable à souhait, et cela, bien plus que vous ne 
pouvez le penser ! 


L'ambition de ces pages est de vous faire découvrir Firefox si vous ne le connaissez pas (partie 1) et/ou de vous montrer comment modifier Firefox 
comme vous le voulez. 
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Croyez moi ou non, le petit panda réserve pas mal de surprises !! 


I - Options basiques de Firefox 

I.1 - Raccourcis clavier usuels 

I.2 - Options de Firefox 
1.2.1 - Onglet « Général » 
1.2.2 - Onglet « Onglets » 
1.2.3 - Onglet « Contenu » 
1.2.4 - Onglet « Applications » 
1.2.5 - Onglet « Vie privée » 
1.2.6 - Onglet « Sécurité » 
1.2.7 - Onglet « Avancé » 


IT - Ajouter des fonctionnalités avec les extensions 
II.1 - Web Of Trust 
II.2 - Ad Block Plus 
II.3 - Flash Block 
II.4 - Scrapbook 
II.5 - Web Développer 
II.6 - Tab Whell Scroll 


III - Personnaliser l'interface 
III. 1 - Les thèmes 
III.2 - Personnaliser l'interface manuellement 


IV - Optimiser Firefox 
IV.1 - Modifications internes 
IV.2 - Alléger Firefox 
IV.3 - Défragmenter Firefox 


V - User Chrome ? 
V.1 - Éléments de l'interface 
V.2 - Masquer les icônes dans les marques pages, ne garder que les noms 
V.3 - L'inverse : ne garder que les icônes, masquer les noms 
V.4 - La barre de chargement, en bas à droite 
V.5 - Changer le fond dans l'interface 
V.6 - La barre d'adresse 
V.7 - Changer les menus 
V.8 - Les icônes de la barre d'outils 
V.9 - Les onglets 
V.10 - Le menu contextuel 


VI - User Content ? 
VI.1 - Principe et différence avec le fichier userChrome.css 
VI.2 - une image en fond de Firefox 
VI.3 - Personnaliser chaque site 
VI.4 - spécial CCM 
VI.4.1 - Mettre en relief les discutions sans réponses 


VI.5 - spécial Ubuntu.fr 


VII - Les easter-eggs de Firefox 
VII.1 - Les sous onglets 
VII.2 - Les pages spéciales... 


VIII - Petites astuces personnelles 
VIII.1 - Organiser ses marques pages ! 
VIII.2 - Faire un raccourcis about:config 
VIIL3 - Un aperçu des onglets. 
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Commençons doucement la découverte de Firefox avec les fonctions basiques, tels que les raccourcis claviers usuels et les options. 


1. 1 - Raccourcis. clavier usuels 


+ AB : Ouvrir un onglet 

+ MM : Fermer l'onglet courant 

+ +  : Annuler la fermeture d'un onglet que l'on vient de fermer. 

+ Ç} ou FA : Rafraichir la page 

+ Ø : Ouvrir le gestionnaire de téléchargement (M + + AÉ sous Linux) 
+ : passer d'un onglet à un autre 

+ MN : Ouvrir la page d'accueil 

: naviguer en plein écran (F11) de nouveau pour sortir du mode plein écran) 


Sommaire 


1.2 - Options; de Firefox 


Laissez-moi vous présenter les principales options de Firefox. On accède aux préférences de Firefox via : 


e sous Windows : « Outils » puis « Options ». 
e sous GNU/Linux : « Édition » puis « Préférences ». 


Options 


0 z ü r 


Général Onglets Contenu Applications Wie privée Sécurité Avancé 


4.2.1 - Onglet « Général > 


On peut par exemple y changer l'adresse de la page d'accueil : 


Démarrage 
Au démarrage de Firefox: | Afficher ma page d'accueil + 
Page d'accueil: Hhttpifffrstarti mozilla. comAirefoxfchient=firefox-a&rls=org moallafrofficnal 


Marque-page. Restaurer la configuration par défaut 


On peut aussi choisir son dossier de téléchargement des fichiers. Le plus pratique, je trouve, c'est de faire en sorte qu'il nous demande où enregistrer 


le fichier à chaque fois : 


Téléchargements 
Afficher la fenêtre Téléchargements lors du téléchargement d'un fichier 


C] La refermer lorsque tous les téléchargements sont terminés 


O Enregistrer les fichiers dans le dossier Téléchargements Farcourir.. 


1.. 2.2 - Onglet « Onglets» 


On y règle les options relatifs aux onglets. C'est à vous de voir comment utiliser ces options. Je n'attirerais votre attention que sur la case « Toujours 
afficher la barre des onglets » : cette case permet de garder la barre d'onglets visible même s'il n'y a qu'un seul onglet d'ouvert. Décocher cette case 
permet de gagner un peu de place à l'écran si vous n'utiliser que très peu les onglets. 


1i.. 2.3 - Onglet «< Contenu 


Permet de régler les polices d'écritures, les couleurs et la taille du texte dans les pages web. On peut aussi paramétrer l'activation du JavaScript ou 
du Java. 


1. 2.41- Onglet « Applications, > 


Cet onglet n'est pas souvent utilisé. Il permet de choisir les logiciels à ouvrir au cas où Firefox rencontre un fichier spécifique. Par exemple, si Firefox 
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rencontre un fichier PDF, il l'ouvrira en général avec Adobe Reader, si cela ne vous convient pas, vous pouvez le changer ici. 


1.2.5; - Onglet « Vie privée » 


Options relatifs au respect de la vie privée de l'utilisateur : on y règle comment Firefox gère l'historique de navigation, les fichiers en cache ou les 
cookies. 


1.2.6 - Onglet « Sécurité » 


La sécurité : permet de définir les règles que Firefox applique lorsque vous êtes sur un site contrefait ou un site d'attaque. On peut aussi gérer les 
mots de passe enregistrés. Je conseille de désactiver l'enregistrement des mots de passes : ils sont stockés sur le disque dur et si Firefox les retient, 
vous ne vous en souviendrez pas mentalement. 


1.2.7 - Onglet « Avancé » 


Des options plus techniques, qu'il ne faut pas toucher sans savoir ce que c'est. On peut y changer les paramètres proxy ou les préférences relatifs aux 
chiffrements des pages sécurisés. 


Sommaire 


2 - Ajouter des fonctionnalités avec les extensions 


L'un des plus gros atouts de Firefox, ce sont ses extensions : des petits ajouts pour Firefox qui lui donnent des fonctionnalités supplémentaires. Voici 
une sélection de modules que je trouve extrêmement pratiques : 


2,1 - Web Of Trust 


Cet add-on, dont le nom est souvent abrégé en « WOT » nous signale les liens de sites web dangereux dans une page web. 
Voici un exemple : 


Google screensaver | Rer 


Rechercher dans : @ Web © Pages francophones © Pages : Franc 
Web (Afficher les options Résultats 1 à 10 sur un total d'environ 56 400 000 pour sc 


Free Screensavers | Screensaver cam Q -| Traduire cette page 
Screensaver com - Your #1 source for origina į feensavers. Free 3D animated 
screensavers for your computer. | 


M imilaires 


a Nova Q 

aille. Une sélection d'écrans de veille pour tous les 
pour personnaliser … 

W ashe - Pages similaires 
i - —— 


in 
| 


1600 FREE Screensavers @ Freesaver CO - | Traduire cette page ] 

Over 1600 free screensavers with thumbnail previews, descriptions and ratings. Our screen 
saver categories include: animals, art, animated, cars, cartoons, ... 

www freesaver.com - Etats-Unis - En cache - Pages similaires 


Télécharger Tropical Aquarium ScreenSaver 60 0 
Tropical Aquarium Screen Saver est un économiseur d'écran vous montrant la vie de la mer 


Vous voyez les ronds rouges et verts ? Les rouges sont des sites potentiellement dangereux (phishing, virus, logiciels piratés, etc.). Sans WOT, il est 
impossible de savoir que vous courrez un risque. 


Je vous recommande très fortement de l'installer. Chacun peut noter un site comme bon ou mauvais, et globalement, ce n'est pas un Chaos car les 
utilisateurs jouent le jeu. Bien entendu, ce service est gratuit et vous n'avez pas besoin de contribuer pour bénéficier de sa protection. WOT vous 
protège en vous évitant de télécharger des logiciels plein de virus, là où les autres logiciels ne font que traquer les virus. C'est mieux de ne pas les 
attraper dés le début non ? 


e Site officiel : www.mywot.com 
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e Plus d'informations et instructions : sur CommentÇaMarche.net 


2,2 - Ad/Block Plus 


Vous n'en avez pas marre des tonnes de publicités sur certaines pages web ? Si ? Alors Ad Block Plus est fait pour vous ! 


Ce module très populaire parmi les utilisateurs de Firefox élimine presque à 100% les publicités, et il est prêt à l'emploi en 3 clics ! Les publicités 
ne sont plus chargés, donc on surfe plus vite ! 


e Site officiel : www.adblockplus.org 


e Plus d'informations et instructions : sur CommentÇaMarche.net 


Astuce : gagnez de la place à l'écran en plaçant l'icône d'Adblock en bas, dans la barre d'état : 


Cliquez sur la flèche à coté de l'icône d'Adblock, 
Pointez sur « options » 


Cochez la case « afficher dans la barre d'état » 


Refaites de même, mais cette fois ci décochez « afficher dans la barre d'outils » 


2, 3 - Flash Block 


Le Flash permet de faire de belles choses sur les pages web. Malheureusement, certains sites en abusent et vous balances des tonnes de boites ou 
fenêtres qui mettent du temps à charger et monopolisent la puissance de l'ordinateur. 


Flashblock empêche les éléments en flash de de lancer tout seul. Il suffit d'un seul dic pour les ouvrir. On gagne en rapidité d'affichage et les éléments 
inutiles ne sont pas téléchargés. 


e Site officiel : flashblock.mozdev.org 


2.4 - Scrapbook 


Un module que j'ai découvert récemment (enfin... plus trop) et qui est devenu mon préféré ! Scrapbook permet de sauvegarder facilement des pages 
web entières et l'enregistrement se fait bien mieux que « enregistrer sous ». En deux clics, la page est sauvegardée et je peux même surligner 
certains passages, retirer des morceaux, les annoter... C'est super pratique pour conserver une page pour le lire plus tard ! 
Si je commence à avoir une liste énorme de pages, je peux les ranger dans des menus, sous formes de dossiers... 

-ier pour Ln instance la propagande qu l'Evals Im OXIgce Jusque là, €110: capliquaric 

léfragmentation : je vais essayer de vous faire un bref résumé d'une paisible conversation 

:, Vous savez probablement que vos données sont rangées dans des « fichiers » mémorisés 


‘7. Ce disque dur est comme une gigantesque armoire à tiroirs : chaque tiroir a la même 
ats[+]} et chaque disque contient de nos jours quelques millions de tiroirs. Si les données 

:2€5 dans des tiroirs contigus, on peut y accéder plus rapidement que si elles sont 

antées) un peu partout dans l'armoire. Cela n'a rien d'étonnant, et ça nous arrive tous les 
paire de chaussettes : ça va plus vite si elles sont toutes les deu DES 
2 mieux vaut une armoire bien rangée qu'une armoire en pagaille] © SudigneurL E 
noire bien rangée quand on l'utilise. 


tëre qui garde ses dossiers dans une énorme armoire avec des r 
raisons qu'avant, que les documents afférents à un même dossie 
s des tiroirs contiqus. Vous devez embaucher une secrétaire et vd] | 


e Site officiel : amb.vis.ne.jp/mozilla/scrapbook 


2.5 - Web Développer 
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Pour tout ceux qui fabriquent des pages web au niveau du code HTML/CSS/JS, ce module est indispensable : il permet d'analyser rapidement et 
simplement la structure de pages ! Il permet par exemple d'afficher l'ordre d'imbrication des éléments, le niveau d'empilement (avec « z-index »), etc. 


Il est super pratique ! 


@ Désactiver Æ Cookies  L1CSSY E Form. Y [E] Images Y |C Information Y |3 Divers Y s” Entourer $ Redi 
y LE H 


| # lehollandaisvolantnet C Afficher les abréviations 
(O Afficher les AccessKeys 
| C Afficher les ancres 
Windows 7 Afficher la taille des blocs 

U Afficher l'ordre des TEN Mhi 


Information 
| Afficher les informations de reremermetri+Maj+F 
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(| Afficher les index de tabulation 


| Afficher la profondeur des tableaux 
| Afficher les informations des tableaux 


CL] Afficher les attributs Title 


SR | F m fad re y i 


e Site officiel : www.chrispederick.com/work/web-developer/ 
e Tutoriel (en anglais) : tips.webdesign10.com 


2.6,- Tab, Whelli Scroll 


La page de cette addon affiche : « L'objet de cette extension est de faire une seule chose et de le faire bien : procurer le passage d'un onglet à 


l'autre avec la molette de la souris. >» 
Et il le fait. 


e Site : https://addons.mozilla.org/fr/firefox/addon/6501 


Sommaire 


3 - Personnaliser l'interface 


3, 1 - Les thèmes 


Parmi les extensions de Firefox, il existe une catégorie qui sont les thèmes, pour changer l'apparence du navigateur. Les thèmes prêt à l'emploi sont 


sur le page officielle. 
Sous Linux Ubuntu, je trouve le thème Strata Human très beau. Sous Windows, j'aime bien Strata Reloaded. 


3,2 - Personnaliser l'interface 


Les thèmes, c'est beau ! Pouvoir choisir les icônes et leurs positions à l'écran, c'est mieux ! Ça tombe bien, c'est possible sous Firefox ! 
À coté de la barre des menus (‘marques pages”, “outils”, “aide”, etc.), faites un clic droit puis « personnaliser ». Vous pouvez alors ajouter des 


1 


icônes, les déplacer, en supprimer... Au final, ça vous donne quelque chose de personnalisé. 


Modification des barres d'outils 


Ajoutez ou supprimez des éléments en les glissant vers ou hors des barres 


d'outils. 
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ter.) à | 
LE | 
Imprimer 5 
séparateur Espace flexible Espace 


+ © *| 


Indicateur d'activité Téléchargement: Historique Marque-pages + 
Montrer : [Eli Petites icônes! | Nouvelle barre | | Configuration par défaut 


Hmm... : je trouve que l'interface de Firefox prend pas mal de place à l'écran. J'ai eu l'idée de mettre la barre des marques pages en haut, à coté de la 
barre des menus. Lorsque vous êtes dans le mode “personnaliser” de Firefox, vous n'avez qu'à faire un glisser déposer de l'élément « Eléments de la 
barre personnelle » tout en haut. J'ai tout expliqué ici. On peut alors désactiver la barre personnelle et ça fait de la place de gagnée ! 


e Avant: 


E Trucs et astuces pour Firefox - lehollandaisvolantnet - Mozilla Firefox 


Fichier Édition Affichage Historique Marque-pages Outils f 


Dex 


r 
| g 
f 


| 


o Après : 


ET 


€ “localhost -g Gal Le UbuntuForums p) CommentCatlarche 


(3) Trucs et astuces pour Firefox - lehollandaisvolantnet - Mozilla Firefox 


- C AN (AP htte://10.0.2.2/tuto/firefox. php 


| ma Trucs et astuces pour Firefox - leholl... $ = 


EE  ” LL — E à — r 


O ET 7 œ l E 


Cette astuce m'est particulièrement pratique, mon écran n'étant pas super haut, c'est un réel gain de place. On peut aller encore plus loin avec le 
module Personal Menu, j'ai expliqué ça là. Cela permet d'utiliser Firefox même sur les mini-portables, qui ont un tout petit écran. 


Bon, personnaliser Firefox avec les thèmes et le choix des icônes n'est plus un secret désormais... Mais on peut aller encore plus loin... Beaucoup plus 
loin même... Il suffit de regarder la page consacrée ;-) 


Sommaire 


4- Optimiser Firefox 


À son origine, Firefox était un navigateur rapide et léger. Malheureusement, au fil des ans, des ajouts ont été faits dans Firefox, et l'ensemble est 
devenu un navigateur plutôt lourd et lent. On peut donc tenter d'accélérer tout ça... Le résultat n'est pas super mais ça aide toujours un peu : 


4.1 - Modifications. internes... 


Firefox permet d'effectuer des modifications internes. Ces paramètres sont visibles en tapant « about:config » dans la barre d'adresse. Il faut 
cependant faire gaffe à ne pas faire n'importe quoi !! 
Voici, sur CCM, une liste de paramètres que vous pouvez changer pour tenter de surfer plus vite. 


4 2 - Alléger Firefox 


Firefox devient plus gourmand en RAM et plus lourd si vous ajouter des modules complémentaires. On peut donc faire le tri dans les modules. 
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Supprimer ou désactiver ceux que vous n'utilisez pas est toujours bénéfique. 


Désactiver l'historique évite à Firefox de charger un gros fichier (10Mo) à chaque lancement. On peut aussi paramétrer l'historique pour que Firefox 
ne garde que les liens visités des XX derniers jours. Plus le nombre est petit, plus Firefox se lancera rapidement. 


Depuis la version 3, Firefox dispose de la barre d'adresse "intelligente" : on commence à taper des mots clés ou une adresse web et Firefox nous sort 
tout ce qui correspond et qui se trouve dans l'historique. On peut désactiver cet outil si on ne s'en sert pas : tapez « about:config » dans la barre 
d'adresse et recherchez la clé « browser.urlbar.maxkichResults ». Il s'agit du nombre de suggestions que la barre vous donne en cherchant dans les 
marques pages et/ou l'historique. Pour la désactiver, mettez "-1" (sans les guillemets). 


La clé « browser.urlbar.autofill » correspond à l'auto-complétion de la barre lorsque l'on commence à taper. Mettez là valeur à « false >» en double 
cliquant dessus si c'est à « true » pour désactiver cette fonction. 


4,3, - Défragmenter Firefox 


Firefox stocke ses fichiers comme l'historique ou les marques pages dans des fichiers SQLite. Il se peut que ces fichiers se fragmentent. Les 
défragmenter permet d'accélérer le chargement de Firefox. 


Voici une astuce pour défragmenter les fichiers de Firefox. 
Sommaire 


Voilà ! Normalement vous connaissez les bases de Firefox et vous savez surfer avec. Vous savez aussi le personnaliser avec des extensions. 
Si vous êtes curieux et que le bricolage ne vous fait pas trop peur, je vous invite à voir la suite de ce tutoriel. La partie suivante vous donnera en effet 
les bases pour modifier de A à Z l'apparence de Firefox grâces aux feuilles de styles, et plus particulièrement le fichier userChrome.css. 


Sommaire 


5 - userChrome ? 


Ce fichier se trouve dans le dossier « chrome » du dossier du profil (voir ici pour trouver le dossier). Il permet, à l'aide des CSS (langage de mise en 
page de fichiers HTML) de modifier la taille, couleur, positions de tout l'interface de Firefox. Ce navigateur utilise les feuilles de styles CSS pour 
l'interface, c'est pratique ! 


Modifier ce fichier n'est absolument pas dangereux pour Firefox. Si vous voyez 
que Firefox affiche quelque chose de travers, il suffit de faire annuler, voire de 
supprimer le fichier userChrome.css. 


Cependant, comme tous les langages de programmations et de mise en page, 


la moindre virgule a son importance, sinon cela ne marchera pas ! 


Chaque élément de l'interface possède un nom. Il suffit donc d'appliquer les CSS que l'on veut à chaque éléments. Je commence donc par vous 
donner les éléments de l'interface et ensuite quelques exemples (trouvés sur le net, et de moi même) : 


Sommaire 
5, 1 - Éléments. de l'interface 


Chaque élément possède un nom (id ou class en CSS) et on peut affecter des styles à chacun d'entre eux. 
Mon intention première était de faire une liste de tout ça, mais ce serait trop long et pas facile pour vous de vous y retrouver. Voici donc directement 
les principaux éléments : (je dis « principaux » car ils sont loin d'y être tous) 
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5) Page de démarrage Mozilla Firefox - Mozilla Firefox 


Fichier Édition Affichage Historique Marque-pages Outils f 
TFE C 1 o SU http. google.frfirefox?client=firefox-aë Dr + | [+ Gocoi 
À BESA OSSI a O 


# “Localhost* "J GMail © UbuntuForums E CommentCaMarche ™ cijaint Compfight La AAML "g iGoogle ® Korben 


| ‘4 Page de démarrage Mozilla Firefox [=+ 


| Web Images Vidéos Maps Actualités Livres Traduction plus + 
. | 
Firefox 


Google 


Recherche avancée 


Rechercher dans: @ Web © Pages francophones © Pages : France 


Recherche Google 


Vous voulez essayer en avant-première la toute dernière version la plus rapide de 
Firetoxé Téléchargez gratuitement Firefox 3.6 béta maintenant | 


` 


A propos de Mozilla 


Terminé 


On peut faire une liste de tous les éléments que l'on veut personnaliser. Voici le code : 


<liste des éléments> { 
mon code css; 


} 


Les éléments sont à séparer par des virgules. 


Pour voir exactement tous les éléments de Firefox, je vous conseil d'installer le 
module "dom inspector". Il peut analyser les pages, mais aussi la page 
particulière : « chrome://browser/content/browser.xul ». C'est la page 
responsable de l'interface de Firefox. 


Le) 


[A] Mozilla Firefox - Inspecteur DOM 
Fichier Édition Rechercher Affichage f 


[m] Ph chrome /browser/content/browserxul Examiner 
~ Document - DOM Modes a - Objet - Jawažcript Object b- 
| nodeMarme id class EF | || Propriété Valeur R 
| bpopupset maimPopupset | + ||) a Sujet [object *ULEle... + 
btooltip btTooltip || DOCUMENT.. 1 E 
atoolbox navigator-too.. toolbox-top À ELEMENT A. 1 
| : itoolbar toolbar-menu,, chromeclass-mme., -ATTRIBUTE _... à 
- toolbar naw-bar toolbar-primary u = DOCUMENT.. 2 
: - itoolbaritern unified-back-.. chromeclass-to... : TEXT_NODE 1 
| - itoolbarbutton reload-button  toolbarbutton-1.…. - CDATA, SECT.. à 
 btoolharhuttan  stonchutton  tonlharhuttons1. | DOCUMENT.. 4 
ui :toolbarbutton horne-button  toolbarbutton-1. | ENTITY_REFE... 5 
o a ar" LL LA: LL: colbarbutton-ic… -ENTITY_ MODE ü 

: | byuhklabel toolbarbutton-t... PROCESSING... 7 

: Htoolbarbuttori wot-button toolbarbutton-1 COMMENT … A 
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toolbaritern urlbar-contal.. chromeclass-loc 7 | “DOCUMENT... 8 bi || 
Navigateur X 
FA l W “Localhost* D GMail © UbuntuForurns >> 
= i + =] S Googie Pn 
| | | {Sans titre] + 7 
Dans la partie suivante, vous trouverez quelques exemple... 
Sommaire 
Sommaire 


5, 2 - Masquer les; icônes; dans les marques pages, ne garder que: les; noms 


Les icônes dans la barre des marques pages prennent de la place. Les retirer permet de gagner de la place mais aussi d'épurer le thème de Firefox (un 
peu comme sous Safari, le navigateur de Mac OS X). 


Ouvrez le fichier « chrome » avec le bloc note ou un autre éditeur de texte, et entrez-y : 


/* masquer les icônes des marques pages */ 
.bookmark-item > .toolbarbutton-icon <{ 
display: none l'important; 


} 


Voici le résultat des marques pages sans les icônes : 


“olant.net - Mozilla Firefox 


= | 


arque-pages Outils ©? *Localhost* GMail UbuntuPorums) CommentCaMarche cijoint >» 


? http:#/10,0,4,2/tutaffirefox php 


C aiii | + 
L-J 


"a v Goog G P 
Si vous trouvez que les marques pages sont trop serrés, et pas assez distinguables, ajoutez ceci : 


f* espacer les marques pages de 8 pixels */ 
.bookmark-item > .toolbarbutton-text 4 
padding-left: 8px limportant:; 

ñ 


olant.net - Mozilla Firefox 


Es) 


UbuntuForums  Comment£alMarche 


que-pages Outils f “Localhost GMhail >> 
httg: 10.0,2.27tuto/firefox. 7 “M Gegi P 


Sommaire 


5.3- L'inverse : me garder que les icônes, masquer les noms 
Bien sûr, si on veut masquer le texte et n'afficher que l'icône, il faut bien retirer le code précédent : sinon le texte et les icônes seraient masqués. 
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C'est un moyen très simple d'en afficher un grand nombre à la fois. Pour n'avoir que les icônes, on peut bien sûr éditer chaque marque page de la 


barre et y mettre un nom « vide », mais ce n'est pas très pratique quand on veut les remettre, c'est pourquoi je préfère utiliser le fichier CSS : 


/* masquer le texte des marques pages */ 


.bookmark-item .toolbarbutton-text < 
display: none l'important; 


} 


Voici le résultat : 


ant.net - Mozilla Firefox a- fE | 
-e-pages Outils ? a AG © > mE E- SOE 8 © WW - 


ttp://10.0.2.2/tuto/firefox php 


5,4- La barre de chargement, em bas. à droite 


Sommaire 


Une astuce de ma part vraiment sans intérêt... 
Par défaut, cette barre est verte sous Windows : 


Il est possible de l'agrandir, de changer sa couleur, d'y mettre une image de fond... Voyons tout ça ! 
e Agrandissement 


Il suffit de mettre dans le fichier userChrome.css les lignes suivantes : (la taille sera 300px de large) 
/* barre de chargement agrandis */ 
.progress-bar { 


width: 300px l'important; 
L 


Cela donne ça : 


e Changer la couleur et mettre une image de fond 


/* barre de chargement en rouge */ 


Voici le code à mettre (remplacez le #ff0000 par une couleur au format hexadécimal de votre choix, celui que j'ai mis est rouge) : 
.progress-bar { 


-moz-appearance: none l'important; 


background: url(mon_image.png) #ff0000 50% repeat l'important; 
} 


Cela donne ça (image à placer dans le dossier « chrome » disponible ici) : 


|- 


nn © © 


656AM |. 
e Exemple de barre arc-en ciel : 
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rien de bien sorcier, j'ai juste utilisé cette image 


Sommaire 


5,5; - Changer le fondidans l'interface 


e Le code suivant mettre la même image de fond derrière la barre des menus, toute les barres d'outils, la barre personnelle, la barre des onglets, 
et les onglets. 


/* la même image en fond de chaque élément de l'interface */ 
menubar, toolbox, toolbar, vbox, tab 4 

background-image: url("mon_image.png') l'important; 
background-color: none l'important; 


} 


Par exemple : un fond métal brossé : (Voici l'image utilisée) 


Fichier Édition Affichage Historique Marque-pages Outils $ “Localhost” GMail UbuntuForums Corr 


B- CG x 1 d W http: 10.0.2. 4/pokemon/paints php 


| re Images de la série Pokemon - leholla... | z- | 


e Ceci permet de mettre une couleur en fond, et une ombre sous le texte de la barre des menus et des onglets : 


/* l'interface en bleu dair et ombre sur le texte */ 

menubar, toolbar, vbox, tab { 

background-color: #b9d1e8 limportant; 

text-shadow: white 1px 1px 2px, white -1px -1px 10px l'important; 
} 


Fichier Édition Affichage Historique Marque-pages Outils ž “Localhost GMail UbuntuForums Corn 


B- C X À Où [6 htp/f10022#utoftutophp O OOOO O 


| pra mes tutos - lehollandaisvolant.net Ba O O 
- g — e T 


k ss 


e Mais moi, je suis sous Linux Ubuntu ! J'utilise l'interface Showtime des thèmes bisigi. J'ai remplacé le gris très clair du thème par un gris 
légèrement plus sombre (#dadada) pour que ça fasse moins mal aux yeux et j'ai décoré Firefox en circonstances : 


= Trucs et astuces pour Firefox -lehollandaisvolantnet - Mozilla Firefox 


Fichier Édition Affichage Historique Marque-pages ScrapBook Outils Aide local“! sebs 


SE CXA http/127.0.0.LAutofirefox/ 
| # Trucs et astuces pour Firefox -lehol. EC 


WwWw.lehollandaisvolant.net 


u Eo r m -o_a — — 7 


J'ai mis le fond tout en gris (l'arrière barre des onglets aussi) et le texte en gris (pas en noir). Je suis sur qu'avec ce que je vous ait donné ci 
dessus, vous pouvez y arriver, donc je vous donne le code ici : 


/* tout le texte de l'interface en gris */ 
menubar > menu, 

#PersonalToolbar, 
#appcontent,.tab-text, 


http://lehollandaisvolant.net/tuto/firefox/#toc63 12 / 24 


Trucs et astuces pour Firefox - lehollandaisvolant.net 14/05/2014 


.bookmark-item, 

textbox-input-box { 

color: #797979 limportant; 

/* la barre d'onglet en gris */ 

Lo 

.tabs-stack 4 

background-color: #dadada l'important; 
} 

/* les éléments du menu sont remis en noir */ 
menu .bookmark-item <{ 

color: black l'important; 


} 


Sommaire 
5,6, - La barre d'adresse 


La barre d'adresse aussi peut-être un bon élément à personnaliser. 
Par exemple, on peut afficher un fond vert quand le site est un site sécurisé (https) : 


/* la barre d'adresse devient verte si le site est en https */ 
#urlbar[level] .autocomplete-textbox-container 4 
background-color: #d0f0c0 l'important 


} 


Site http (normal) : Site https : 


4 http: fan, google tr SL” GAIN https//mail google.com/mail/#tin SE + 


On peut aussi mettre un fond rouge s'il n'y a aucune suggestion dans l'historique (pas de suggestions de /awesome-bar): 


#urlbar[nomatch] .autocomplete-textbox-container 4 
background-color: #d0f0c0 l'important 
ff 


http, gogole = 


Sommaire 
5,7 - Changer les; menus 


Pour le moment, c'est pas mal hein ? Pour peu que l'on s'y connaisse en CSS, et on fait ce que l'on veut ! 
Continuons et voyons que même les menus peuvent être modifiés : vous voyez la barre des menus, avec « Fichier », « Edition », « Affichage », etc. ? 
Et bien on va masquer quelques menus ! Comme chacun d'entre eux a un nom, on peut choisir ceux à cacher. Les revoici : 


e Fichier : #file-menu 

e Édition : #edit-menu 

e Affichage : #view-menu 

e Historique : #history-menu 

e Marques-pages : #bookmarksMenu 
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e Outils : #tools-menu 
e Aide : #helpMenu 


e Pour ceux qui ont le menu de Scrapbook : #ScrapBookMenu 


Pour en cacher un, mettez ce code dans votre fichier « userChrome.css » 


<list de mes menus> { 
display: none l'important; 


} 


Évidement, remplacez la <#list de mes menus> par vos menus, en les séparant par des virgules. Par exemple, pour masquer les deux premiers, vous 
mettrez « #file-menu, #edit-menu ». 
Voici ce que ça donne si je supprime les menus « Fichier », « Edition » et le menu <« aide » : 


eJ Livre d'Or - Mozilla Firefox 


Affichage Historique Marque-pages Outils *Localhost” Gi 


-= - Q A |] http://10.0.2.2/to 


Livre d'Or J 


B C A o (es http: hi, geckozone org forumi. 


Bon, j'avoue que c'est moche, mais j'avais pas d'inspiration... Je vous passe le code pour reproduire cette horreur chez vous : 


menubar { 

-moz-border-radius: 5px !important; 
border: 1px solid #00ff00 !important; 
background-color: black!important; 

J 

#helpMenu { 

font-family: 'arial black'!important; 
color: red !important; 

} 

#edit-menu , #tools-menu< 
font-family: ‘times new roman’ l'important; 
color: orangelimportant; 

} 

#file-menu, #view-menu { 
font-family: ‘comic sans ms’ l'important; 
color: blue l'important; 

font-size: 130% limportant; 

} 

#history-menu { 

font-weight: bold l'important; 

color: purple l'important; 

dé 

#bookmarksMenu < 

font-family: symbol l'important; 

color: white l'important; 


} 


Comme si ça ne suffisait pas, on peut aussi appliquer du style aux menus, lorsqu'ils sont survolés uniquement... 


( #view-menu[_moz-menuactive="true"] { 


http://lehollandaisvolant.net/tuto/firefox/#toc63 14 / 24 


Trucs et astuces pour Firefox - lehollandaisvolant.net 14/05/2014 


font-family: ‘comic sans ms’ l'important; 
color: blue l'important; 

font-size: 130% limportant; 

} 
#history-menu[_moz-menuactive="true"] { 
font-weight: bold l'important; 

color: purple l'important; 


} 


3) timo - le hollandais volant - Mozilla Firefox 


= - C + & http://10.0.2.3/ 


Fichier Édition Séfiohqe Historique Marque-pages Ou 


(3) timo - le hollandais volant - Mozilla Firefox 


Fichier Édition Affichage | Historique | Marque-pages Outils 


Kà » C w AP http://10.0.2.2/ 


... OU alors uniquement quand ils sont ouverts : (ce code met le menu ouvert en rouge et en gras) 


menubar > menu[open] { 
color: red !important; 
font-weight: bold !important; 


} 


Sommaire 


5,8 - Les. icônes. de la barre d'outils 


Evidement, on peut cacher ceux qui l'on veut, mettre un fond à toute la barre etc., mais je voudrais juste vous montrer cette astuce, que j'ai 
découvert sur geckozone mais dont la version originale me semblait ne pas marcher. Il s'agit en fait de “combiner” les boutons "actualiser" et "stop" 


étant donné que l'on ne se sert du premier que si la page est chargé (pas pendant le chargement) et le second uniquement pendant le chargement. 
On peut ainsi gagner un peu de place. 


Pour que cela fonctionne, il faut que vous inversiez les deux icônes, via le menu de personnalisation de l'interface : 
clic droit sur un espace vide de l'interface > personnaliser. Les éléments de l'interface devenant amovibles, on peut les inverser. 


Fichier Édition  Afficmmms 


hier Édition Affichage 


Ensuite, il ne reste plus qu'à faire jouer les CSS : 


#stop-button[disabled] < 

display:none; 

$ 

#stop-button:not([disabled]) { 

display:auto; 

} 

#stop-button:not([disabled]) + #reload-button { 
display:none; 


} 


Voilà ! Redémarrez Firefox et les boutons seront fusionnés. Si l'un des boutons vous manque, la touche EE) équivaut au bouton Stop et la 
combinaison (ti + (À à réactualiser. 


http://lehollandaisvolant.net/tuto/firefox/#toc63 15 / 24 


Trucs et astuces pour Firefox - lehollandaisvolant.net 


14/05/2014 


5,9) - Les: onglets 


Sommaire 


On peut là aussi inventer ce que l'on veut. On peut supprimer l'icône du site, ou contraire réduire l'onglet de façon à ce que seule l'icône ne reste (et 


avoir un très grand nombre d'onglets soient visibles). 


Je vous passe le code pour faire que l'onglet sélectionné sera plus grande que les autres quand on en ouvre un grand nombre : 


/* l'onglet courant fera 200px minimum */ 
#content tab|[selected="true"] { 
min-width: 200px l'important; 

} 


LS Forum d'assistance informatique - Mozilla Firefox 


Fichier Édition Affichage Historique Marque-pages Outils 2?  “Localhast* 


) C À DE 


| à Forum d'assista # | ) Forum d'assista.. 


mun TE 
Pi ça marche Rechercher po 


UbuntuForurms 


5, 10- Le menu:contextuel 


Sommaire 


Tout comme la barre de menu, on peut personnaliser les éléments du menu contextuel (le menu du dic droit). Ce menu change en fonction de la 


page, mais il affiche par exemple les éléments « Précédent », « Suivant » ou « Actualiser » qui me sont totalement inutile. Voici toute la liste des 


éléments du menu contextuel (en noir ceux que je juge intéressant à masquer) : 


e #context-openlink : Ouvrir le lien dans uns nouvelle fenêtre 
e #context-openlinkintab : Ouvrir le lien dans un nouvel onglet 
e #context-sep-open : <séparateur> 

e #context-bookmarklink : Marque ce lien 

e #context-savelink : Enregistrer le lien sous... 

e #context-sendilink : Envoyer un lien vers cette page... 

e #context-copyemail : Copier l'adresse e-mail 

e #context-copylink : Copier l'adresse de la page 

e context-sep-copylink : <séparateur> 

e #context-viewimage : Afficher l'image 

e context-copyimage-contents : Copier l'image 

e #context-copyimage : Copier l'adresse de l'image 

e Hcontext-sep-copyimage : <séparateur> 

e #context-saveimage : Enregistrer l'image sous... 

e #context-sendimage : Envoyer l'image... 

e H#context-setWallpaper : Choisir l'image comme fond d'écran 
e #context-blockimage : Bloquer les images provenant de... 
e #context-back : Précédent 

e H#context-forward : Suivant 

e #context-reload : Actualiser 

e #context-stop : Arrêter le chargement de la page 

ə Hcontext-sep-stop : <séparateur> 

e #context-bookmarkpage : Marquer cette page... 

e #context-savepage : Enregistrer la page sous... 

e #context-sendpage : Envoyer la page 


Page précédente 
Page suivante 


Actualiser N 


Arrêter 


Marquer cette page 
Enregistrer s045.. 


Envoyer un lien wers la page.. 


Afficher l'image de fond 


Tout sélectionner 


Code source de la page 
Informations sur la page 


Propriétés 


Bloquer l'image avec Adblock... 


Avant T 
| Après 


Enregistrer 5015... 


Afficher l'image de fond 


http://lehollandaisvolant.net/tuto/firefox/#toc63 


16 / 24 


Trucs et astuces pour Firefox - lehollandaisvolant.net 14/05/2014 


ə context-sep-viewbgimage : <séparateur> Jout selectionner 


e #context-viewbgimage : Voir l'image de fond Code source de la page 
e #context-undo : Annuler Informations sur la page 
e #context-sep-undo : <séparateur> Bloquer l'image avec Adblock... 


e #context-cut : Couper 

e #context-copy : Copier 

e #context-paste : Coller 

e context-delete : Supprimer 

ə context-sep-paste : <séparateur> 

ə context-selectall : Sélectionner tout 

e context-sep-selectall : <séparateur> 

ə Hcontext-keywordfield : Ajouter un mot clé pour cette recherche 

e context-searchselect : Recherche <moteur de recherche> pour « <selection> » 
e H#frame-sep : <séparateur> 

e frame : Ce cadre 

e #context-sep-properties : <séparateur> 

e Hcontext-viewpartialsource-selection : Code source de la sélection 

e Hcontext-viewpartialsource-mathml : Code source le l'élément MathML 
e #context-viewsource : Code source de la page 

e #context-viewinfo : Informations sur la page 

ə Hcontext-metadata : Propriétés 

e Hcontext-sep-bidi : <séparateur> 

e #context-bidi-text-direction-toggle : Changer la direction du texte 

e #context-bidi-page-direction-toggle : Changer la direction de la page 


Note : les séparateurs sont des séparateurs spécifiques. II n'y a pas de 


séparateurs génériques. 


Ci dessus, je vous ai seulement montré comment cacher les éléments pour réduire la taille du menu contextuel. On peut aussi mettre de la couleur 
dans tout ça : 


Page précédente 
Page surante 
Actualiser N 
TELET 


Marquer cette page 


Envoyer un lien wers la page.. 


Afficher l'image de fond 


Tout sélectionner 


Code source de la page 


Informations sur la page 


Le code de cette horreur est là : 


#context-back { 

font-family: 'arial black'!important; 
color: red !important; 

} 

#context-forward , #context-sendlind{ 
font-family: ‘times new roman’ l'important; 
color: orangelimportant; 

i 

#context-reload { 

font-family: ‘comic sans ms' l'important; 
color: blue l'important; 

font-size: 130% limportant; 
background-color: skyblue l'important; 
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} 


#context-bookmarkpage { 
font-weight: bold l'important; 


color: purple l'important; 


} 


#context-stop { 


font-family: wingdings l'important; 


color: white l'important; 


text-shadow: black 1px 1px 2px, 


} 


red -1px -1px 10px l'important; 


#context-savepage { 
font-family: Arial !important; 
color: black !important; 


text-shadow: 0 0 4px white, 


~ 


0 -2px 4px #ff3, 

2px -4px 6px #fd3, 

-2px -6px 11px #f80, 

2px -10px 18px #f20 !important; 


Sommaire 


Maintenant que l'on a quasiment tout vu (ou plutôt que je pense que vous pouvez faire pas mal de choses avec ce que je vous ait donné), je vous 


propose d'aller dans la 3ème partie de ce tutoriel et de découvrir le fichier userContent, un autre fichier bien pratique de Firefox ! 


- userContent ? 


6,1, - Principe et différence avec le fichier userChiome ess 


On vient de voir le fichier userChrome.css : il permettait de modifier l'interface de Firefox. Il existe encore un autre fichier : c'est le fichier 


userContent.css. Ce fichier gère tout ce qui se trouve dans la zone d'affichage de Firefox : 


= userChrome.css | 


(E Google - Mozilla Firefox 


Sommaire 


Ce que vous mettrez dans ce fichier se répercutera donc directement sur l'affichage des pages web. Pour les connaisseurs, il agit comme du CSS 


normal, sauf que là, le CSS n'est plus propre au site web visité, mais au navigateur. 


Un petit exemple ? 
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Mettez ceci dans le fichier et tous les sites auront une police blanche sur fond noir : 


html * < 
color: white l'important; 
background: black l'important; 


? 


Voici ce que donne cette méthode bourrin sur la page de Google : 


Maps Actualités Livres Gmail plus + iGoogle | Paramètres de recherche | Connexion 


le 


France 


Recherche avancée 


Outils linguistigues 


Rechercher dans: © Web @ Pages francophones @ Pages : France 


Programmes de publicité - Solutions d'entreprise - À propos de Google - Google.com in English 


Bien évidement, on peut aussi changer la police, sa taille ou tout autre chose. 


Si par exemple vous voulez systématiquement mettre la police des pages en plus grand, on peut mettre ça : 


html { 
font-size: 120% limportant; 


} 


Sommaire 


6.2 - une image en fond de Firefox 


Quand je dis « en fond de Firefox » je parle du fond de la page blanche, quand on ouvre un nouvel onglet. C'est totalement inutile, donc 
indispensable. Effectivement, on peut mettre une image ou une couleur en fond. Il suffit de mettre votre image dans le dossier chrome et d'utiliser ce 


code : 


@-moz-document url("about:blank") < 
html body { 
background: url(image.jpg) l'important; 
} 
html { 
width: 100% !important; 
height: 100% !important; 
T 
T 


L'image sera répétée. 
Si vous voulez mettre un logo centré verticalement et horizontalement, mettez : 


( @-moz-document url("about:blank") { 
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html body { 

background: url(image.jpg) center no-repeat l'important; 
ii 

html { 

width: 100% !important; 

height: 100% !important; 

} 

} 


Voici ce que j'obtiens en ajoutant ma touche perso : 


Mozilla Firefox 
Fichier Édition Affichage Historique Marque-pages ScrapBook Outils Aide local i | io 
k | Rechercher dans les marque-pages et l'his ~| TW 7| Wikipédia (fr) 


| |} (Sans titre] J | = 


o 1] © 


Sommaire 


6,3 - Personnaliser chaque site 


Mettre du CSS directement dans le fichier aura pour effet d'appliquer ce code à tout ce qui se trouve dans la fenêtre du navigateur : tous les sites web 
donc. Ainsi le code que j'ai donné obtenir la page de Google en noir mettra aussi les autres sites en noir. 

Heureusement, Firefox peut appliquer des CSS ou même un fichier CSS à n'importe quel site, je veux dire, des CSS ciblés. 

Un exemple serait de mettre la page google.fr en bleu, mais le page google.nl en orange, etc. 


Voici la syntaxe, que j'ai trouvé sur geckozone (où tout ce qui est expliqué sur ma page est détaillé d'ailleurs, mais pas aussi simplement :-). 


@-moz-document 

domain(nom_de domaine du site 1), 
domain(nom_de domaine du site 2), 
domain(nom_de domaine du site n) { 
code CSS habituel 

16 


Par exemple, pour mettre un fond noir + liens en rouge sur toutes les pages de ce site, ainsi que du site commentcamarche.net : 


@-moz-document /* syntaxe de firefox */ 
domain(lehollandaisvolant.net), /* site 1 (+ virgule à la fin) */ 
domain(commentçamarche.net) { f site 2 (+ accolade) */ 

body, body * { /* les éléments, classes... */ 


http://lehollandaisvolant.net/tuto/firefox/#toc63 20 / 24 


Trucs et astuces pour Firefox - lehollandaisvolant.net 14/05/2014 


background-color: black limportant; /* propriétés */ 


} /* on ferme le css de l'élément */ 
a{ 

color: red limportant:; 

} 
} /* on ferme les CSS des domaine */ 


Voilà pour affecter du CSS à un domaine entier, mais on peut aussi mettre une adresse partielle : 


@-moz-document url-prefix(adresse_http_ partielle) { 
mes css 


} 


Une adresse partielle, c'est par exemple, http://lehollandaisvolant.net/tuto/. Le code n'affectera que les pages dans mon dossier "tuto" et non les 
tutos sur Ubuntu ou Pokémon. 


Et enfin, voici pour le CSS page par page : 


@-moz-document url(adresse_http_ précise) { 
mes css 


i 


ici, il faut mettre l'adresse exacte de la page. 


Bon ! Maintenant, vous avez ce qu'il faut pour faire ce que vous voulez ! Il ne me reste plus qu'à vous donner quelques exemples ! 


Sommaire 


6,4,- spécial| CCM ! 
6,4, 1 - Mettre en relief les, discutions. sans réponses 


Sur CCM, les discutions en cours, les discutions résolues, et les discutions sans réponses ont des classes css différentes. J'en ai profité pour mettre en 
évidence les questions non résolues : 


@-moz-document 
domain(commentcamarche.net) { 
/* discutions en cours */ 
.Subject { 
color: black l'important; 
ï 
/* discutions sans réponses */ 
.noAnswers <{ 
color: blue !important; 
font-weight: bold l'important; 
ï 
/* discutions résolues */ 
.resolved 4 
color: black l'important; 
} 
i; 
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J Aide pour XF dans Flyff Jeux vidéo 4 nov2008 Modeur-70 
€ Dual boot #P - 7 et partitions: Question MatérielHardware 24 nov 2009 alhunot 
E GDI Generic WAKFU Jeux vidéo 21 nov 2008 GMBA 
4} kestion Logiciels/Pilotes 28 déc 2009 kaka 
CJ installer dd suplémentaire MatérieMHardware 26 déc 2009 LARQGUILLES7 
1) kestion Logiciels#Pilotes 28 déc 2009 kaka 
C) Comment craker sa PSP slim 6.10 Jeux vidéo 28 déc 2008 reurtipro 
1) configuration Tomcat Linux/Unix 28 déc 2009 noueñnoue 
1) Demande des explication pr installer Jeux vidéo 25 déc 2009 taki 

pharaon 
1) ma touche "A" marche 1 foie sur 2 pk ? MatérielHardnare 28 déc 2009 Sprey 
11 +213774365029 Téléphonie /PDAGPS 26 déc 2009 krourouceté. 
3) Quel composant prendre? Matériel Hardware 26 déc 2009 toupoutaux 
(J Combien de guitar sur xbox 360 peut-on Jeux vidéo 28 déc 2009 kenyanroc 

mettre 
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6,5 - spécial! Ubuntu; fr 


Sur ce site là, j'ai eu envi de changer le fond. L'image par défaut n'est pas super belle... Si on change le fond par notre propre image, on peut mettre 
l'image dans le même dossier que le fichier userContent.css. À moins d'indiquer l'url exacte de l'image, mais le mettre en local ne prendra pas de 
bande passante ! 


Ü@-moz-document 
url-prefix(http://forum.ubuntu-fr.org/) { 
body { 
background-image: url(ubuntu-body.jpg) l'important; 
background-attachment: fixed l'important; 


Je vous fais grâce de la capture (j'ai pris cette image en fond) 
En revanche, je me suis légèrement amusé et j'ai modifié deux ou trois bricoles. Je vous donne le fichier .css, ainsi que toutes les images. 


Décompressez l'archive dans votre dossier « chrome » puis ajoutez ceci au début du fichier userContent.css : 


( U@import url(ubuntu_forum/ubuntu_forum.css); 


Et ça donne ceci : 


eUDUNEUS 1e : i z 


Communauté francophone des utilisateurs d'Ubuntu 


Vous êtes ICI: Accueil» Forum { f Accueil Documentation h = Planet 


Navigation a) Vous n'êtes pas connecté. 


Liste des forums 


Liste des utilisateurs 


Inscription 


Connexion 


Installation 
Liens de recherche 


ri 
Li ins | 


Voici mon fichier .zip, à décompresser dans le dossier chrome de Firefox. Le design ne prendra effet que sur les forums, pas dans la documentation 
d'ubuntu-fr.org. J'ai utilisé des CSS3, qui devraient marcher avec firefox 3 et plus. 
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Ouf... 

Si vous avez suivi ce tuto, vous pourrez modifier les sites comme vous le voulez. Mais faites gaffe : rajouter votre touche perso sur chaque site est 
bien joli, mais en ce qui me concerne, je n'aime pas trop dénaturer l'œuvre des autres. L'exemple du style personnalisé du forum d'Ubuntu.org est 
tout de même assez poussé. 

Personnellement, j'utilise ce fichier que pour m'aider, par exemple en mettant en gras certains liens sur CCM :-) 


La dernière page contiendra quelques petites surprises, déjà connues de tous (ou pas) que recèle Firefox. Vous trouverez aussi quelques astuces 
personnelles pour ce navigateur 


Sommaire 
7 - Les easter-eges: de Firefox... 
7.1 - Les sous onglets 
chrome://browser/content/browser.xul 

Sommaire 


7.2 - Les pages spéciales... 


Ce que j'appelle les pages spéciales de Firefox, sont les pages en about:. Vous connaissez « about:config » ? Et bien, y'en a plein d'autres, plus ou 
moins utiles ! 


e about:config : permet de modifier des paramètres systèmes de Firefox. Ici par contre, il faut faire très attention à ce que l'on fait. 
e about:cache : permet de visualiser les fichiers qui se trouvent dans le cache mémoire ou cache disque de Firefox. 

e _about:rights : affiche vos droits en tant qu'utilisateur de Firefox. 

e about:license : Affiche la licence MPL (Mozilla Public Licence) de Firefox. 

e about:mozilla : affiche un extrait du /vre de Mozilla. Cette extrait varie en fonction de la version de Firefox. 

e about:robots : montre un petit message humoristique en rapport avec les robots et les trois lois de la robotique. 


Bienvenue, humains ! Je suis prêt pour vous. 


Nous Sommes venus en paix et avec bienveillance ! 


= Un robot ne peut blesser un être humain ou, par son inaction, permettre qu'un 
être humain soit blessé. 


= Les robots ont vu des choses que vous ne pourriez pas croire. 
= Les robots sont vos copains en plastique avec lesquels il est amusant d'être. 


u Les robots ont des postérieurs en métal brillant qui ne doivent pas être mordus. 


Etils ont un plan. 


[ Péessayer | 


e about:plugins : montre en détail la liste des plugins installés sur Firefox. Pratique. 

e about:credits : une liste des personnes ayant contribué à Firefox. 

e about:logo : affiche le logo en grand de Firefox. 

ə about kitchensink : une petite animation « ascii art » en XML. (merci à Lynd pour celui là ;-) 

e about:buildconfig : des informations sur la compilation des sources ayant donné la version que vous utilisez. 
e about:crashes : informations à propos des rapports d'erreurs que vous avez envoyés par le passé. 

e about:privatebrowsing : page d'accès à la navigation privée. 

ə about:support : informations pour le débuggage (en cas de plantage. 


Et les pages d'avertissements : 
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e about:certerror : avertissement sur les pages non certifiés. Les SSL c'est bien, mais encore faut-il que l'on vérifie les certificats... 


e about:blocked : attention, page contrefaite ! 
e about:effacer_internet : euh... non, j'ai du me fourvoyer là... 


8 - Petites astuces personnelles... 


8,1, - Organiser ses marques. pages ! 


Sommaire 


Firefox propose un système d'organisation des marques pages qui est bien pratique. Si vous n'avez que 5 ou 6 favoris, ok, pas la peine... Mais si, 
comme moi, vous voulez toujours garder une trace d'un lien utile, commencez par faire des dossiers dans le menu des marques pages ! Ensuite, 
organisez chaque nouveau site dans le bon dossier ! C'est plus facile que de trier 500 sites lorsque votre collection de sites préférés aura atteint des 


proportions énormes... 


Le raccourci + D] permet de faire d'un site directement un marque page. À vous de rajouter les étiquettes. Les mots clés en quelque sortes. 


Ils serviront aussi à vous y retrouver. 


8.2 - Faire un raccourcis about:config 


Si vous bricolez souvent des clés du registre de Firefox, via la page « about:config », il est plus pratique d'en faire un raccourcis. Si en plus la barre de 


recherche intelligente est activée, vous commencez à taper et hop ! Firefox vous propose directement d'y accéder ! 


C'est tout con comme idée, mais c'est super pratique à la longue ! 


8,3 - Um aperçu. des onglets, 


Changez simplement la clé « browser.allTabs.previews » à True dans « about:config ». 


Quand vous cliquez ensuite sur la petite flèche à coté des onglets, vous aurez une prévisualisations ! 


- © A |O |aboutcontig 


timo - le hollandais volant x | $. Trucs et astuces pour Firefox - leh... x ] |_| aboutconfig 


z | 


m de l'option + | Statut Type Valeur 


essibilitytypeaheadfind.prefillwithselection par défaut booléen true 


essihilitutwneaheadfind soundiRl nar défaut chaîne heen 


Wow... Un nouveau tuto qui s'achève pour moi, et une page que j'espère utile pour vous ! 
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J'ai passé pas mal de temps sur ces pages, et j'ai beaucoup appris moi même sur Firefox. La liste des choses que j'ai dit sur Firefox est cependant loin 


d'être exhaustive, aussi ce tuto n'a pas la vocation de rassembler tout sur Firefox, mais un maximum de choses que j'ai jugé utile... 
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